<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四下第7课《数据校验》身份证号校验工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        
        .id-card-input {
            font-family: 'Courier New', monospace;
            letter-spacing: 0.1em;
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10>
        <div class="card-effect rounded-2xl p-10 shadow-2xl text-center w-full max-w-2xl mx-4">
            <!-- 游戏标题 -->
            <div class="mb-6">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">🆔 身份证校验工具</h1>
                <p class="text-gray-600">四下第7课《数据校验》身份证号校验工具</p>
            </div>
            
            <!-- 提示信息 -->
            <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-medium mb-1 text-xl">使用说明：</p>
                        <p class="text-base">输入18位身份证号码，系统将自动校验身份证号码的有效性。</p>
                    </div>
                </div>
            </div>
            
            <!-- 身份证校验区域 -->
            <div class="bg-white rounded-xl p-6 shadow-lg">
                <div class="mb-4">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-id-card text-blue-600 mr-2"></i>
                        <label for="idCardInput" class="block text-lg font-bold text-gray-800">输入身份证号码：</label>
                    </div>
                    <input type="text" id="idCardInput" class="id-card-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入18位身份证号码" maxlength="18">
                </div>
                
                <button onclick="validateIDCard()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-check-circle mr-2"></i>验证身份证号
                </button>
                
                <div id="resultText" class="mt-4"></div>
            </div>
        </div>
    </div>
    

    <script>
        function validateIDCard() {
            const idCard = document.getElementById("idCardInput").value;
            const resultText = document.getElementById("resultText");
            
            // 清空之前的结果
            resultText.innerHTML = "";
            
            // 验证身份证号码格式
            if (!/^\d{17}[\dXx]$/.test(idCard)) {
                resultText.innerHTML = '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg flex items-center"><i class="fas fa-exclamation-circle mr-2"></i>身份证格式不正确，请输入18位身份证号码（最后一位可以是X）。</div>';
                return;
            }

            // 校验身份证号码
            const coefficients = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // 加权因子
            const checkDigits = "10X98765432"; // 校验码对应值

            let sum = 0;
            for (let i = 0; i < 17; i++) {
                sum += parseInt(idCard[i]) * coefficients[i];
            }
            const calculatedCheckDigit = checkDigits[sum % 11];

            if (idCard[17].toUpperCase() !== calculatedCheckDigit) {
                resultText.innerHTML = '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg flex items-center"><i class="fas fa-times-circle mr-2"></i>身份证号码校验不通过，请检查输入的身份证号码。</div>';
            } else {
                // 提取身份证信息
                const areaCode = idCard.substring(0, 6);
                const birthDate = idCard.substring(6, 14);
                const genderCode = parseInt(idCard.substring(16, 17));
                const gender = genderCode % 2 === 1 ? "男" : "女";
                
                // 格式化出生日期
                const year = birthDate.substring(0, 4);
                const month = birthDate.substring(4, 6);
                const day = birthDate.substring(6, 8);
                const formattedDate = `${year}年${month}月${day}日`;
                
                resultText.innerHTML = `
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-check-circle mr-2"></i>
                            <span class="font-bold">身份证号码校验通过！</span>
                        </div>
                        <div class="mt-2 text-left">
                            <p><i class="fas fa-map-marker-alt mr-2"></i>地区代码：${areaCode}</p>
                            <p><i class="fas fa-birthday-cake mr-2"></i>出生日期：${formattedDate}</p>
                            <p><i class="fas fa-venus-mars mr-2"></i>性别：${gender}</p>
                        </div>
                    </div>
                `;
            }
        }

        // 页面加载时执行初始化
        window.onload = function() {
            // 初始化页面
        };
    </script>
</body>
</html>